<template>
  <div class="home">
    <div style="position: fixed;top: 0;left: 0;z-index: 100;width: 100%;">
      <titleCustom :title="$route.meta.title" :backUrl="'/callLog'"></titleCustom>
    </div>
    <van-tabs color="#2c91fc" title-active-color="#2c91fc" title-inactive-color="#333" sticky offset-top="50">
      <van-tab title="详情信息">
        <div class="detailInfoClass">
          <div class="detailInfoItem">
            <!-- <div class="infoItem1">
              <div style="font-weight: 600;">品牌</div>
              <div style="color: #999999;font-weight: 600;">{{detailInfo.brand}}</div>
            </div>
            <div class="infoItem1">
              <div style="font-weight: 600;">展厅</div>
              <div style="color: #999999;font-weight: 600;">{{detailInfo.brand}}</div>
            </div> -->
            <div class="infoItem1">
              <div style="font-weight: 600;">归属组织</div>
              <div style="color: #999999;font-weight: 600;">{{detailInfo.fixCenterName}}</div>
            </div>
            <div class="infoItem1">
              <div style="font-weight: 600;" v-if="billType==0">接听员工</div>
              <div style="font-weight: 600;" v-if="billType==1">外呼员工</div>
              <div style="color: #999999;font-weight: 600;">{{detailInfo.personName}}</div>
            </div>
          </div>
          <div class="detailInfoItem" style="margin-top: 10px;">
            <!-- <div class="infoItem1">
              <div style="font-weight: 600;">微信参数</div>
              <div style="color: #999999;font-weight: 600;" @click="call">
                <textarea v-model="wxconfig" auto-height placeholder="" />
              </div>
            </div>
            <div class="infoItem1">
              <div style="font-weight: 600;">微信url</div>
              <div style="color: #999999;font-weight: 600;" @click="call">
                <textarea v-model="wxurl" auto-height placeholder="" />
              </div>
            </div> -->

            <div class="infoItem1">
              <div style="font-weight: 600;">客户电话</div>
              <div style="color: #999999;font-weight: 600;" @click="call">
                <van-icon name="phone" size="15" color="#59A1FF" />
                {{detailInfo.customerNumber||""}}
              </div>
            </div>
            <div class="infoItem1">
              <div style="font-weight: 600;">呼叫类型</div>
              <div style="color: #999999;font-weight: 600;">{{detailInfo.callType||""}}</div>
            </div>
            <div class="infoItem1">
              <div style="font-weight: 600;">外显号码</div>
              <div style="color: #999999;font-weight: 600;">{{detailInfo.hotline||""}}</div>
            </div>
            <div class="infoItem1">
              <div style="font-weight: 600;">接听状态</div>
              <div style="color: #999999;font-weight: 600;">{{detailInfo.status||""}}</div>
            </div>
            <div class="infoItem1">
              <div style="font-weight: 600;">开始时间</div>
              <div style="color: #999999;font-weight: 600;">{{detailInfo.startTime||""}}</div>
            </div>
            <div class="infoItem1">
              <div style="font-weight: 600;">接通时间</div>
              <div style="color: #999999;font-weight: 600;">{{detailInfo.bridgeTime||""}}</div>
            </div>
            <div class="infoItem1">
              <div style="font-weight: 600;">结束时间</div>
              <div style="color: #999999;font-weight: 600;">{{detailInfo.endTime||""}}</div>
            </div>
            <div class="infoItem1">
              <div style="font-weight: 600;">通话总时长</div>
              <div style="color: #999999;font-weight: 600;">{{detailInfo.bridgeDurationStr||""}}</div>
            </div>
            <div class="infoItem1">
              <div style="font-weight: 600;">总时长</div>
              <div style="color: #999999;font-weight: 600;">{{detailInfo.totalDuration||""}}</div>
            </div>
            <div class="infoItem1">
              <div style="font-weight: 600;">客户挂机</div>
              <div style="color: #999999;font-weight: 600;">{{detailInfo.endReason||""}}</div>
            </div>
          </div>
          <div class="detailInfoItem" style="margin-top: 10px;">
            <van-collapse v-model="activeNames">
              <van-collapse-item>
                <div slot="title" style="font-weight: 600;">呼叫坐席</div>
                <div class="infoItem1">
                  <div style="font-weight: 600;color: #333;">坐席电话</div>
                  <div style="color: #999999;font-weight: 600;">{{detailInfo.clientNumber}}</div>
                </div>
                <div class="infoItem1">
                  <div style="font-weight: 600;color: #333;">坐席工号</div>
                  <div style="color: #999999;font-weight: 600;">{{detailInfo.cno||""}}</div>
                </div>
                <div class="infoItem1">
                  <div style="font-weight: 600;color: #333;">坐席姓名</div>
                  <div style="color: #999999;font-weight: 600;">{{detailInfo.clientName||""}}</div>
                </div>
                <div class="infoItem1">
                  <div style="font-weight: 600;color: #333;">开始时间</div>
                  <div style="color: #999999;font-weight: 600;">{{detailInfo.startTime||""}}</div>
                </div>
                <div class="infoItem1">
                  <div style="font-weight: 600;color: #333;">接通时间</div>
                  <div style="color: #999999;font-weight: 600;">{{detailInfo.bridgeTime||""}}</div>
                </div>
                <div class="infoItem1">
                  <div style="font-weight: 600;color: #333;">结束时间</div>
                  <div style="color: #999999;font-weight: 600;">{{detailInfo.endTime||""}}</div>
                </div>
                <div class="infoItem1">
                  <div style="font-weight: 600;color: #333;">通话时长</div>
                  <div style="color: #999999;font-weight: 600;">{{detailInfo.bridgeDurationStr||""}}</div>
                </div>
                <div class="infoItem1">
                  <div style="font-weight: 600;color: #333;">总时长</div>
                  <div style="color: #999999;font-weight: 600;">{{detailInfo.totalDuration||""}}</div>
                </div>
                <div class="infoItem1">
                  <div style="font-weight: 600;color: #333;">呼叫类型</div>
                  <div style="color: #999999;font-weight: 600;">{{detailInfo.callType||""}}</div>
                </div>
                <div class="infoItem1">
                  <div style="font-weight: 600;color: #333;">呼叫结果</div>
                  <div style="color: #999999;font-weight: 600;">{{detailInfo.sipCause||""}}</div>
                </div>
                <div class="infoItem1">
                  <div style="font-weight: 600;color: #333;">呼叫情况</div>
                  <div style="color: #999999;font-weight: 600;">{{detailInfo.brand}}</div>
                </div>
                <div class="infoItem1">
                  <div style="font-weight: 600;color: #333;">主叫记忆</div>
                  <div style="color: #999999;font-weight: 600;">{{detailInfo.brand}}</div>
                </div>
              </van-collapse-item>
            </van-collapse>
          </div>

        </div>
      </van-tab>
      <van-tab title="车辆信息">
        <div class="vehicleInfoClass" v-if="detailInfo.cars!=null&&detailInfo.cars.length>0">
          <div class="vehicleInfoItem" v-for="(item,index) in detailInfo.cars" :key="index">
            <div style="padding: 5px 8px;" v-if="detailInfo.cars!=null&&detailInfo.cars.length>1">车辆信息{{index+1}}</div>
            <div class="infoItem1" style="background-color: #fff;">
              <div style="font-weight: 600;">所属维修中心</div>
              <div style="color: #999999;font-weight: 600;">{{item.fixcentername}}</div>
            </div>
            <div class="infoItem1" style="background-color: #fff;" @click="goCarDetail(item)">
              <div style="font-weight: 600;">车架号</div>
              <div
                style="color: #999999;font-weight: 600;display: flex;justify-content: center;align-items: center;flex-direction: row;">
                <div style="color: #999999;font-weight: 600;">{{item.vin}} </div>
                <!-- <div style="font-size: 25px;">></div> -->
                <van-icon name="arrow" style="margin-left: 5px;color: #999999;font-weight: 600;"></van-icon>
              </div>
            </div>
            <div class="infoItem1" style="background-color: #fff;">
              <div style="font-weight: 600;">车牌</div>
              <div style="color: #999999;font-weight: 600;">{{item.carno}}</div>
            </div>
            <div class="infoItem1" style="background-color: #fff;">
              <div style="font-weight: 600;">车型</div>
              <div style="color: #999999;font-weight: 600;">{{item.modelname}}</div>
            </div>
          </div>
        </div>
        <div class="vehicleInfoClass" v-else>
          <div class="vehicleInfoItem">
             <div style="padding-top: 50px;padding-left: 45%;"> 暂无数据</div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <div class="bottomFixedClass">
      <van-icon name="play-circle-o" color="#1684fc" size="21" @click="play"
        v-if="audioStatus=='pause'&&(detailInfo.localRecordFile!=''&&detailInfo.localRecordFile!=null)" />
      <van-icon name="pause-circle-o" color="#1684fc" size="21" @click="stop"
        v-if="audioStatus!='pause'&&(detailInfo.localRecordFile!=''&&detailInfo.localRecordFile!=null)" />
      <div style="width: 50%;" class="videoClass"
        v-if="detailInfo.localRecordFile!=''&&detailInfo.localRecordFile!=null">
        <!-- <van-progress :percentage="playTime" style="width: 100%;" :show-pivot="false" /> -->
        <progress-custom :showNumber="false" :value="playTime" @SetOpacityConfig='updateAudio' />
      </div>
      <div style="width: 30%;" class="videoClass"
        v-if="detailInfo.localRecordFile!=''&&detailInfo.localRecordFile!=null">
        {{formateTime(playIngTime>audioDuration?audioDuration:playIngTime)}} /
        {{formateTime(audioDuration)}}
      </div>
      <div style="flex: 1;color: #165dff;" @click="goAsr" v-if="detailInfo.fileStatus==1">转写</div>
    </div>
    <!--<audio id="myaudio"
      src="https://sdbother.oss-cn-beijing.aliyuncs.com/88f15d58334a429c6840d780ab7a8f6c0255eae619c5d693e5f0d64726b4ccb9.mp3" />
       :src="detailInfo.localRecordFile" /> -->
    <audio id="myaudio" :src="tapeFile" />
	<div class="uploadClass" @click="uploadClick">
		<img src="../../../assets/images/upload.png"/>
	</div>
  </div>
</template>
<script>
import { Dialog, Notify, Toast } from 'vant'
import titleCustom from '@/components/titleCustom/title'
import aiccCallApi from '@/apiaicc/aiccCallApi'
import progressCustom from '@/components/progress/progressCustom'
import axios from 'axios'
import { getCookies } from '@/utils/util.js'
import qs from 'qs'

const base_url = process.env.BASE_API
export default {
    components: {
      titleCustom,
      progressCustom,
      Toast,
      Dialog,
      Notify
    },
    data() {
      return {
        audioStatus: "pause",
        audioTime: '',
        activeNames: [],
        playTime: 0, //播放进度条
        playIngTime: 0, //播放时间
        playInv: '',
        tapeFile: '',
        wxconfig:'',
        wxurl:'',
        detailInfo: [],
        lsLogList: [],
        billId: 0,
        billType: 0,
        tokenInfo: [],
        startPlay: 0,
        audioDuration: 0,
      }
    },
    mounted() {
      let that = this
      if (localStorage.getItem('callBillId')) {
        this.billId = localStorage.getItem('callBillId')
        this.billType = localStorage.getItem('billType')
        this.startPlay = localStorage.getItem('startPlay')
        this.getCallDetail()
        this.getAudioLength()
      }
      // if (this.$route.query) {
      //   this.billId = this.$route.query.billId
      //   this.billType = this.$route.query.billType
      //   this.startPlay = this.$route.query.startPlay
      //   this.getCallDetail()
      // }
      setTimeout(function() {
        that.getAudioTime()
      }, 500);
    },
    methods: {
		/**
		 * 下载文件
		 */
		async uploadClick(){
      Toast.loading({
        message: '下载中...',
        forbidClick: true,
        overlay: true
      })
      let that = this
      let param = {
        id: that.billId,
        type: that.billType
      }
      await aiccCallApi.getCallTap(param).then((res) => {
        // window.open('https://pic.meitukk.com/uploads/meitukk/dm/20230621/230621045810441.jpg')
        setTimeout(() => {
          let e=document.createElement('a')
          e.download='下载文件'
          e.style.display='none'
          e.href=res.data
          document.body.appendChild(e)
          e.click()
          document.body.removeChild(e)
          Toast.clear()
        }, 500);
      })
		},
      goCarDetail(data) {
        console.log(data, 'goCarDetail');
        this.$router.push({
          path: '/carOrderDetail',
          query: {
            billId: data.carid,
            carNo: data.carno
          },
        })
      },
      goAsr() {
        this.$router.push({
          path: '/asr',
          query: {
            billId: this.billId,
            billType: this.billType
          },
        })
      },
      getCallDetail() {
        Toast.loading({
          message: '加载中...',
          forbidClick: true,
          overlay: true
        })
        aiccCallApi.getCallLogDetail({
          id: this.billId,
          type: this.billType,
          saToken: localStorage.getItem('token')
        }).then((res) => {
          Toast.clear()
          console.log(res);
          this.detailInfo = res.data
          if (this.startPlay == 1 && this.detailInfo.localRecordFile != '' && this.detailInfo.localRecordFile !=
            null) {
            this.play()
          }
        })
      },
      call() {
        let vm = this
        if (vm.detailInfo.customerNumber === "" || vm.detailInfo.customerNumber === null) {
          Dialog.alert({
            title: '',
            message: '号码不能为空'
          }).then(() => {
            // on close
          })
          return
        } else { //手机
          if (!vm.validMobile(vm.detailInfo.customerNumber)) {
            Dialog.alert({
              title: '',
              message: '号码不正确'
            }).then(() => {
              // on close
            })
            return
          }
        }
        console.log("handleTel-isAiccUser", localStorage.getItem("isAiccUser"));
        let isPc = vm.checkIsPC()
        if (localStorage.getItem("isAiccUser") + "" == "true") {
          // isPc = true
          Toast.loading({
            message: '拨打中，请稍后...',
            forbidClick: true,
            overlay: true
          })
          if (isPc) { //如果是PC端
            vm.doPcCallOut(isPc)
          } else { //唤起小程序
            vm.doMobileCallout(isPc)
          }
        } else {
          if (isPc) { //如果是PC端
            Dialog.alert({
              title: '',
              message: '请在手机端使用此功能'
            }).then(() => {
              // on close
            })
          } else {
            window.location.href = `tel:${tel}`
          }

        }
      },
      doMobileCallout(isPc) {
        let vm = this
        aiccCallApi.callOut({
          customerNumber: vm.detailInfo.customerNumber,
          customerName: vm.detailInfo.customerName,
          billId: vm.detailInfo.businessBillId,
          billOrgId: vm.detailInfo.deptId,
          carId: vm.detailInfo.carId,
          carModelName: vm.detailInfo.carModelName,
          fixCenterId: vm.detailInfo.fixCenterId,
          fixCenterName: vm.detailInfo.fixCenterName,
          insCmpName: vm.detailInfo.insCmpName,
          type: isPc == true ? "pc" : "phone"
        }).then((callres) => {
          console.log('AICC获取tokenInfo成功返回信息:', callres)
          if (callres.code == 0) {
            vm.tokenInfo = callres.data
            vm.toMiniprogram()
          } else {
            Toast.clear()
            Dialog.alert({
              title: '',
              message: callres.msg
            }).then(() => {
              // on close
            })
            if (res.code == -900 && res.msg == '坐席未绑定手机号码,请先绑定手机号码') {
              this.$router.push("/seatPhone");
            }
          }
        })
      },// 评估申请跳转小程序
      toMiniprogram() {
        let vm = this
        vm.wxurl=location.href.split('?')[0]
        axios({
          url: `${base_url}/proxy/qywx/jsdkConfig`,
          method: 'post',
          data: qs.stringify(
            // { url: 'http://wycl.autocnd.com:41080/ysc/assessManageDetail' },
            {
              url: location.href.split('?')[0],
              type: 'app'
            }, {
              encode: false
            },
          ),
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            satoken: getCookies('token'),
          },
        }).then((res) => {
          console.log('jsdkConfig:', res)
          let djsdk = res.data.data
          localStorage.setItem('jsdk', JSON.stringify(res.data.data))
          wx.agentConfig({
            corpid: djsdk.corpid, // 必填，企业微信的corpid，必须与当前登录的企业一致
            agentid: djsdk.agentid, // 必填，企业微信的应用id （e.g. 1000247）
            timestamp: djsdk.timestamp, // 必填，生成签名的时间戳
            nonceStr: djsdk.nonceStr, // 必填，生成签名的随机串
            signature: djsdk.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
            jsApiList: ['launchMiniprogram'], //必填，传入需要使用的接口名称
            success: function(res) {
              vm.wxconfig= JSON.stringify(vm.tokenInfo)
              console.log('agentConfig权限成功返回信息:', res)
              // wx9e482fe1abf18c87
              // appid: 'wx02e51afc29cecca4', // 需跳转的小程序appid
              wx.invoke(
                'launchMiniprogram', {
                  appid: vm.tokenInfo.appId, // 需跳转的小程序appid
                  // appid: 'wx9e482fe1abf18c87', // 测试跳转的appid
                  path: `pages/calling/calling?token=${vm.tokenInfo.token}&enterpriseId=${vm.tokenInfo.enterpriseId}&cno=${vm.tokenInfo.cno}&called_number=${vm.tokenInfo.calledNumber}&platform=${vm.tokenInfo.platform}&type=1`, // 所需跳转的小程序内页面路径及参数
                },
                function(res) {
                  Toast.clear()
                  if (res.err_msg == 'launchMiniprogram:ok') {
                    // 正常
                  } else {
                    // 错误处理
                  }
                },
              )
            },
            fail: function(res) {
              Toast.clear()
              console.log('agentConfig权限失败返回信息:', res)
              if (res.errMsg.indexOf('function not exist') > -1) {
                alert('版本过低请升级')
              }
            },
          })
        })
      },
      doPcCallOut(isPc) {
        let vm = this
        aiccCallApi.callOut({
          customerNumber: vm.detailInfo.customerNumber,
          customerName: vm.detailInfo.customerName,
          billId: vm.detailInfo.businessBillId,
          billOrgId: vm.detailInfo.deptId,
          carId: vm.detailInfo.carId,
          carModelName: vm.detailInfo.carModelName,
          fixCenterId: vm.detailInfo.fixCenterId,
          fixCenterName: vm.detailInfo.fixCenterName,
          insCmpName: vm.detailInfo.insCmpName,
          type: isPc == true ? "pc" : "phone"
        }).then((res) => {
          Toast.clear()
          if (res.code == 0) {
            Notify({
              type: 'success',
              message: '呼叫成功，请稍后'
            })
          } else {
            Dialog.alert({
              title: '',
              message: res.msg
            }).then(() => {
              // on close
            })
            if (res.code == -900 && res.msg == '坐席未绑定IP话机,请先绑定IP话机') {
              this.$router.push("/seatPhone");
            }
          }
        })
      },
      validMobile(str) {
        return /^1[3456789]\d{9}$/.test(str) || /^0[0-9-]{10,13}$/.test(str)
      },
      checkIsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
          "SymbianOS", "Windows Phone",
          "iPad", "iPod"
        ];
        var flag = true;
        for (var v = 0; v <= Agents.length; v++) {
          if (userAgentInfo.indexOf(Agents[v]) >= 0) {
            flag = false;
            break;
          }
        }
        return flag;
      },
      onClick() {
        console.log('cs')
      },
      onRefresh() {
        setTimeout(() => {
          this.isLoading = false;
          this.getList()
        }, 1000);
      },
      getList() {
        this.logList.push(this.logList[0])
      },
      /**
       * 上拉加载
       */
      scrollBottom(e) {
        console.log('c')
      },
      async play() {
        let that = this
        let param = {
          id: that.billId,
          type: that.billType
        }
        await aiccCallApi.getCallTap(param).then((res) => {
          that.tapeFile = res.data
          that.audioStatus = 'play'
          setTimeout(() => {
            var audios = document.getElementById('myaudio')
            audios.play()
            that.playInv = setInterval(() => {
              if (that.playIngTime == that.audioDuration) {
                clearInterval(that.playInv);
                that.audioStatus = 'pause'
                audios.pause()
                that.playTime = 0
                that.playIngTime = 0
              } else {
                that.playIngTime++
                // that.playTime += 100 / that.audioDuration
                if (that.playTime < 100) {
                  that.playTime += 100 / that.audioDuration
                } else {
                  that.playTime = 100
                  clearInterval(that.playInv)
                }
                console.log(that.playIngTime, that.playTime);
              }
            }, 1000);
          }, 500);
        })

      },
      stop() {
        let that = this
        that.audioStatus = 'pause'
        var audios = document.getElementById('myaudio')
        audios.pause()
        clearInterval(that.playInv);
      },
      getAudioTime() {

        var audios = document.getElementById('myaudio')
        let long = parseInt(audios.duration)
        let min = parseInt(long / 60 % 60)
        let seconds = Math.ceil(long % 60)
        let formateSeconds = seconds > 59 ? 59 : seconds
        this.audioTime = `${min<10?'0'+min:min}:${formateSeconds<10?'0'+formateSeconds:formateSeconds}`
      },
      formateTime(time) {
        let long = parseInt(time)
        let min = parseInt(long / 60 % 60)
        let seconds = Math.ceil(long % 60)
        let formateSeconds = seconds > 59 ? 59 : seconds
        return `${min<10?'0'+min:min}:${formateSeconds<10?'0'+formateSeconds:formateSeconds}`
      },
      /**
       * @param {Object} pre 拖动
       */
      updateAudio(pre) {
        // setTimeout(function() {
        let that = this
        setTimeout(function() {

          that.stop()
          var audios = document.getElementById('myaudio')
          let time = Math.round(that.audioDuration * pre * 0.01)
          audios.currentTime = time;
          that.playIngTime = time
          that.playTime = Math.round(pre)
          that.audioStatus = 'play'
          audios.play()
          that.playInv = setInterval(() => {
            if (that.playIngTime >= that.audioDuration) {
              clearInterval(that.playInv);
              that.audioStatus = 'pause'
              audios.pause()
              that.playTime = 0
              that.playIngTime = 0
            } else {
              that.playIngTime++
              if (that.playTime < 100) {
                that.playTime += 100 / that.audioDuration
              } else {
                that.playTime = 100
              }
              // that.playTime += 100 / audios.duration
            }
          }, 1000);
        }, 500);
      },
      async getAudioLength() {
        let that = this
        let param = {
          id: that.billId,
          type: that.billType
        }
        await aiccCallApi.getCallTap(param).then((res) => {
          console.log(res.data)
          const audio = new Audio(res.data)
          audio.addEventListener('loadedmetadata', function() {
            console.log('audio loadedmetadata', audio.duration)
            that.audioDuration = audio.duration
          })
        })
      }
    },
  };
</script>
<style scoped>
  ::v-deep body {
    background: #ebedf0 !important;
  }

  .home {
    background-color: #ebedf0;
    //font-family: 'Alibaba';
    //height: calc(100vh - 60px);
    width: 100%;
    font-size: 14px;
    padding-top: 50px;
  }

  .detailInfoClass {
    width: 100%;
    height: calc(100vh - 50px - 44px - 50px);
    padding: 10px 0;
    background-color: #ebedf0;
    box-sizing: border-box;
    overflow-y: scroll;
  }

  .detailInfoItem {
    width: 100%;
    height: auto;
    background-color: #fff;
    color: #333;
  }

  .infoItem1 {
    width: 100%;
    height: 45px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
  }

  .vehicleInfoClass {
    width: 100%;
    height: calc(100vh - 60px - 44px - 50px);
    padding: 10px 0;
    background-color: #ebedf0;
    box-sizing: border-box;
    overflow-y: scroll;
  }

  .vehicleInfoItem {
    margin-top: 5px;

  }

  .bottomFixedClass {
    width: 100vw;
    box-sizing: border-box;
    padding: 10px 10px 15px 10px;
    height: 60px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    border-top: 10px solid #ebedf0;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .videoClass {
    height: 100%;
    display: flex;
    align-items: center;
    margin-left: 10px;
    font-size: 12px;
    color: #999999;
  }
  .uploadClass{
	  width: 45px;
	  height: 45px;
	  background-color: #165dff;
	  border-radius: 50%;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  position: fixed;
	  bottom: 70px;
	  right: 20px;
	  z-index: 200;
  }
  .uploadClass img{
	  width: 20px;
	  height: 20px;
  }
</style>
